<template>
    <view>
        <navigation-bar :back="false" title="福利中心"></navigation-bar>

        <view class="b1">
            <view class="b2">
                <view :class="benefitIndex == 0 ? 'b3' : 'b4'" @tap="changeTag" :data-data="0">全部</view>
                <view :class="benefitIndex == 1 ? 'b3' : 'b4'" @tap="changeTag" :data-data="1">礼包</view>
                <view :class="benefitIndex == 2 ? 'b3' : 'b4'" @tap="changeTag" :data-data="2">游戏安利</view>
                <view :class="benefitIndex == 3 ? 'b3' : 'b4'" @tap="changeTag" :data-data="3">内测资格</view>
                <view :class="benefitIndex == 4 ? 'b3' : 'b4'" @tap="changeTag" :data-data="4">福利</view>
                <view :class="benefitIndex == 5 ? 'b3' : 'b4'" @tap="changeTag" :data-data="5">周边爱鲲</view>
                <view :class="benefitIndex == 6 ? 'b3' : 'b4'" @tap="changeTag" :data-data="6">爱鲲优惠</view>
            </view>

            <scroll-view scroll-y class="scrollView" :refresher-triggered="isUp" @scrolltolower="down" refresher-enabled @refresherrefresh="up" :lower-threshold="80">
                <view class="t11" v-for="(item, index) in testData" :key="index">
                    <view class="t12">
                        <view class="t13">
                            <image src="https://img1.baidu.com/it/u=1343005871,978857318&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500" mode="" class="t14" />
                        </view>
                        <view class="t15">
                            <view class="t16">
                                山海鲲进化录- 1、礼包码:VIP666 2、礼包码:VIP777 3、礼包码:svip666 4、礼包码:svip777 5、礼包码:svip888 6、礼包码:jwdzgdWzjqd85Ww1g
                                7、礼包码:Xuxubaobao 8、礼包码:Xiaoxiao 9、礼包码:hon...
                            </view>
                            <view class="t17">12-22 结束</view>
                        </view>
                    </view>
                </view>
                <view class="t11" v-for="(item, index) in testData" :key="index">
                    <view class="t12">
                        <view class="t13">
                            <image src="https://mmocgame.qpic.cn/wechatgame/kUadayTVnZCxpgEdibPdZpfbiaZG4cZuDJLjRib5uBRkLOH00DBt63ib2iakp2RQBzJSp/0" mode="" class="t14" />
                        </view>
                        <view class="t15">
                            <view class="t16">永暮幻想礼包-高级召唤卷轴*5，金币*100000，钻石*168，源生符石*388</view>
                            <view class="t17">12-20 结束</view>
                        </view>
                    </view>
                </view>
                <view style="height: 30rpx"></view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
// pages/benefit/benefit.js
import navigationBar from '../../components/navigation-bar/navigation-bar.vue'
export default {
    components: {
        navigationBar
    },
    data() {
        return {
            testData: [1],
            isUp: false,
            benefitIndex: uni.getStorageSync('benefitIndex') ? uni.getStorageSync('benefitIndex') : 0,
            gameData: [],
            page: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        // 创建Promise数组来跟踪请求
        const promises = [];

        // 假设你有一个获取数据的方法
        const promise = getData().then((res) => {
            this.setData({
                testData: res.data // 假设这是你获取的数据
            });
        });
        promises.push(promise);

        // 等待所有请求完成
        Promise.all(promises).then(() => {
            // 停止下拉刷新动画
            uni.stopPullDownRefresh();
        }).catch(error => {
            console.error('刷新数据出错:', error);
            // 即使出错也要停止刷新动画
            uni.stopPullDownRefresh();
        });
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        up(e) {
            console.log('上');
            console.log(e);
            this.setData({
                isUp: false
            });
            this.setData({
                isUp: true
            });
        },

        down(e) {
            console.log('下');
            console.log(e);
        },

        //第二个标签页tag标签
        changeTag(e) {
            let index = e.currentTarget.dataset.data;
            this.setData({
                benefitIndex: index
            });
            uni.setStorageSync('benefitIndex', index);
            this.setData({
                gameData: [],
                page: 1
            });
            this.getData();
        },

        getData() {}
    }
};
</script>
<style>
.b1 {
    padding: 40rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.b2 {
    /* display: flex;
  padding-bottom: 30rpx;
  flex-wrap: wrap; */
    display: flex;
    padding-bottom: 30rpx;
    word-break: keep-all;
    overflow-y: auto;
    border-bottom: 3rpx solid #e0e0e0;
    margin-bottom: 25rpx;
    padding-bottom: 35rpx;
}

.b3 {
    margin-right: 48rpx;
    height: 45rpx;
    /* background: rgba(var(--red), var(--green), var(--blue), 0.15); */
    text-align: center;
    line-height: 45rpx;
    padding: 5rpx 0rpx;
    border-radius: 150rpx 50rpx 30rpx 30rpx;
    font-size: 30rpx;
    color: var(--Color);
    font-weight: 600;
    margin-bottom: 20rpx;
    border-bottom: 4rpx solid var(--Color);
}

.b4 {
    margin-right: 48rpx;
    height: 45rpx;
    /* background: #e6e6e6; */
    text-align: center;
    line-height: 45rpx;
    padding: 5rpx 0rpx;
    border-radius: 100rpx;
    font-size: 30rpx;
    color: var(--GColor);
    margin-bottom: 20rpx;
}

.t11 {
    display: flex;
    margin-bottom: 40rpx;
}
.t11:last-child {
    margin-bottom: 130rpx;
}
.t12 {
    display: flex;
}

.t13 {
    display: flex;
    margin-right: 30rpx;
}

.t14 {
    width: 250rpx;
    height: 132rpx;
    border-radius: 15rpx;
}

.t15 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.t16 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28rpx;
    font-weight: 600;
}

.t17 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24rpx;
    color: gray;
    padding-top: 25rpx;
}

.t18 {
    display: flex;
    font-size: 24rpx;
    color: gray;
    align-items: center;
    padding-top: 8rpx;
}

.t19 {
}

.t20 {
    background: gray;
    width: 3rpx;
    height: 22rpx;
    margin: 0 10rpx;
}

.scrollView {
    overflow: auto;
}
</style>
